<template>
    <div class="tab-content">
        <el-form ref="photovoltaicFormRef" :model="photovoltaicForm" :rules="photovoltaicRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="光伏装机总量" prop="totalInstalled">
                        <el-input v-model="photovoltaicForm.totalInstalled" placeholder="请输入光伏装机总量" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="光伏发电总量" prop="totalGeneration">
                        <el-input v-model="photovoltaicForm.totalGeneration" placeholder="请输入光伏发电总量" />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="绿电发电总量" prop="totalGreenSupply">
                        <el-input v-model="photovoltaicForm.totalGreenSupply" placeholder="请输入绿电供应总量" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绿电消纳总量" prop="greenConsumption">
                        <el-input v-model="photovoltaicForm.greenConsumption" placeholder="请输入绿电消耗量" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="储能装机总量" prop="totalStorageCapacity">
                        <el-input v-model="photovoltaicForm.totalStorageCapacity" placeholder="请输入储能总容量" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绿电发电总量" prop="actualStoredEnergy">
                        <el-input v-model="photovoltaicForm.actualStoredEnergy" placeholder="请输入实际储电量" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="绿电直供总量" prop="totalDirectSupply">
                        <el-input v-model="photovoltaicForm.totalDirectSupply" placeholder="请输入绿电直供总量" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绿电直供利用量" prop="directSupplyUtilization">
                        <el-input v-model="photovoltaicForm.directSupplyUtilization" placeholder="请输入绿电直供利用量" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="弃电总量" prop="totalAbandonedPower">
                        <el-input v-model="photovoltaicForm.totalAbandonedPower" placeholder="请输入弃电总量" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="弃电利用总量" prop="totalAbandonedPowerUtilized">
                        <el-input v-model="photovoltaicForm.totalAbandonedPowerUtilized"
                            placeholder="请输入弃电利用总量" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="弃电利用率" prop="abandonedPowerUtilization">
                        <el-input v-model="photovoltaicForm.abandonedPowerUtilization" placeholder="请输入弃电利用率" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="savePhotovoltaicData">保存光伏数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'

    // 模块1: 光伏数据配置表单
    const photovoltaicForm = ref({
        totalInstalled: '', // 光伏装机总量
        totalGeneration: '', // 光伏发电总量
        totalStorageCapacity: '', // 储能总容量
        actualStoredEnergy: '', // 实际储电量
        totalGreenSupply: '', // 绿电供应总量
        greenConsumption: '', // 绿电消耗量
        totalAbandonedPower: '', // 弃电总量
        totalAbandonedPowerUtilized: '', // 弃电利用总量
        totalDirectSupply: '', // 绿电直供总量
        directSupplyUtilization: '', // 绿电直供利用量
        abandonedPowerUtilization: '', // 弃电利用率
    })

    // 表单验证规则
    const photovoltaicRules = {
        totalInstalled: [{ required: true, message: '光伏装机总量不能为空', trigger: 'blur' }],
        totalGeneration: [{ required: true, message: '光伏发电总量不能为空', trigger: 'blur' }],
        totalStorageCapacity: [{ required: true, message: '储能总容量不能为空', trigger: 'blur' }],
        actualStorage: [{ required: true, message: '实际储电量不能为空', trigger: 'blur' }],
        totalGreenSupply: [{ required: true, message: '绿电供应总量不能为空', trigger: 'blur' }],
        greenConsumption: [{ required: true, message: '绿电消耗量不能为空', trigger: 'blur' }],
        totalAbandonedPower: [{ required: true, message: '弃电总量不能为空', trigger: 'blur' }],
        totalAbandonedPowerUtilized: [{ required: true, message: '弃电利用总量不能为空', trigger: 'blur' }],
        abandonedPowerUtilization: [{ required: true, message: '弃电利用率不能为空', trigger: 'blur' }],
        totalDirectSupply: [{ required: true, message: '绿电直供总量不能为空', trigger: 'blur' }],
        directSupplyUtilization: [{ required: true, message: '绿电直供利用量不能为空', trigger: 'blur' }],

    }
    // 保存函数
    const photovoltaicFormRef = ref()
    const savePhotovoltaicData = async () => {
        if (!photovoltaicFormRef.value) return
        
        try {
            await photovoltaicFormRef.value.validate()
            await updateDataClassify({
                id: 1,
                key: 'module1',
                value: photovoltaicForm.value

            })
            console.log('保存光伏数据配置:', photovoltaicForm.value)

            ElMessage.success('光伏数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        photovoltaicForm.value = module
    }
    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>